<template>
<!--    <div class="el-transfer" v-loading="loadingFlag">-->
    <div class="el-transfer">
        <el-row justify="end" class="pb12">
            <el-button type="primary" size="small">保存</el-button>
        </el-row>
        <div class="el-transfer-panel">
            <p class="el-transfer-panel__header">
                <label class="el-checkbox">
                    <el-checkbox v-model="leftCheckAll"
                                 :indeterminate="leftIsIndeterminate"
                                 @change.stop="handleLeftCheckAllChange">
                        未选择
                        <span>{{ countLeftSelect }}/{{ state.unselectedList.length || 0 }}</span>
                    </el-checkbox>
                </label>
            </p>
            <div class="el-transfer-panel__body" >
                <div class="el-checkbox-group el-transfer-panel__list"
                     style="overflow-y: auto;padding: 0!important;margin: 0!important;"
                     :infinite-scroll-disabled="disabledScroll"
                     v-infinite-scroll="loadStaffList">
                    <label class="el-checkbox el-transfer-panel__item" v-for="(item,index) in state.unselectedList" :key="index">
                        <el-checkbox v-model="item.checkbox">
                            <span class="pb9" style="display: inline-block">{{ item.name }}</span>
                        </el-checkbox>
                    </label>
                </div>
                <div>

                    <p class="el-transfer-panel__empty" style="display: none;">加载更多</p>
                    <p class="el-transfer-panel__empty" style="display: none;">加载中...</p>
                    <p class="el-transfer-panel__empty" style="display: none;">已加载全部</p>
                </div>
            </div>
        </div>
        <div class="el-transfer__buttons">
            <div class="el-transfer-buttons__wapper">
                <el-button type="primary"
                           size="small"
                           :disabled="leftToRightButStatus"
                           @click.stop.prevent="toSelectedList"
                           icon="ele-ArrowRight"/>
                <el-button size="small"
                           type="primary"
                           :disabled="rightToLeftButStatus"
                           icon="ele-ArrowLeft"/>
            </div>
        </div>
        <div class="el-transfer-panel">
            <p class="el-transfer-panel__header">
                <label class="el-checkbox">
                    <el-checkbox v-model="rightCheckAll"
                                 :indeterminate="rightIsIndeterminate"
                                 @change="handleRightCheckAllChange">
                        未选择
                        <span>{{ countRightSelect }}/{{ state.selectedList.length || 0 }}</span>
                    </el-checkbox>
                </label>
            </p>
            <div class="el-transfer-panel__body">
                <div class="el-checkbox-group el-transfer-panel__list"
                     style="overflow-y: auto;padding: 0!important;margin: 0!important;">
                    <label class="el-checkbox el-transfer-panel__item" v-for="(item,index) in state.selectedList" :key="index">
                        <el-checkbox v-model="item.checkbox">
                            <span class="pb9" style="display: inline-block">{{ item.name }}</span>
                        </el-checkbox>
                    </label>
                </div>
                <p class="el-transfer-panel__empty" style="display: none;">No data</p>
            </div>
        </div>

    </div>
</template>

<script setup lang="ts">
import {computed, reactive, ref, toRefs, watch} from "vue";
import {ElMessage} from "element-plus";

/** 此处引入 */
// const emit = defineEmits(['update:dialogDrawer'])
/** 定义组件入参 */
const props = defineProps({})

// const {dialog} = toRefs(props)

/*
    加载更多 - disabledScroll false and loading false
    加载中.. - disabledScroll false and loading true
    没有更多了 - disabledScroll true and loading false

 */
const disabledScroll = ref(false);

// 加载控制器
const loadingLeftPage = ref(false)

// 状态数据
const state = reactive<any>({
    size: 10,// 页容
    current: 1,// 当前页
    unselectedListCheckAll: false,
    total: 0,// 记录条数据
    unselectedList: [],// 未选中的列表
    selectedList: [],//  选中的列表
})

// 左侧全选框
const leftCheckAll = ref(false)
// 左侧全选框 - 半选状态
const leftIsIndeterminate = ref(false)
// 添加至右侧按钮状态
const leftToRightButStatus = ref(true)

// 右侧全选框
const rightCheckAll = ref(false)
// 右侧全选框 - 半选状态
const rightIsIndeterminate = ref(false)
// 添加至右侧按钮状态
const rightToLeftButStatus = ref(true)

// 加载员工列表
const loadStaffList = async () => {
    try {
        // 判断分页数据，控制关闭加载
        if (state.current >= 20){
            disabledScroll.value = true
        }
        const temp:any = {
            id: new Date().getTime(),
            name:"莉莉丝"
        }
        state.unselectedList.push(temp)
        state.current = state.current + 1
    }catch (e:any) {
        console.log(e);
        ElMessage.error(e.message)
    }
}

// 左侧
const handleLeftCheckAllChange = (val:any) =>{
    // 检查当前是否有列表数据
    if (0 >= state.unselectedList.length) {
        leftCheckAll.value = false
        leftIsIndeterminate.value = false
        return
    }
    // 循环选中
    state.unselectedList.map((m:any)=>{
        m['checkbox'] = val
    })
}

// 左侧
let countLeftSelect = computed(()=>{
    let temp = state.unselectedList.filter((c: any) => c.checkbox).length
    let max = state.unselectedList.length
    // 当选中没有或满了就关闭半选
    if (0 >= temp || 0 >= max) {
        leftCheckAll.value = false
        leftIsIndeterminate.value = false
        leftToRightButStatus.value = true
    } else if (temp > 0) {
        // 当有选中时改为半选
        leftToRightButStatus.value = false
        leftIsIndeterminate.value = true
        if (temp === max){
            // 全选
            leftIsIndeterminate.value = false
            leftCheckAll.value = true
        }
    }
    return temp
})

// 添加至选中状态
const toSelectedList = () => {
    const ids: Array<any> = []
    state.unselectedList.forEach((fe: any) => {
        if (fe.checkbox) {
            // 添加至选中
            state.selectedList.push(fe)
            // 移除选中
            fe.checkbox = false
            // 添加至删除
            ids.push(fe.id)
        }
    })
    ids.forEach((id: any) => {
        // 查找下标
        const i = state.unselectedList.findIndex((fi: any) => fi.id === id)
        // 检查
        if (i === -1) new Error('error')
        // 删除
        state.unselectedList.splice(i, 1)
    })
}

// 右侧
const handleRightCheckAllChange = (val:any) =>{
    // 检查当前是否有列表数据
    if(!state.selectedList.length){
        rightCheckAll.value = false
        rightIsIndeterminate.value = false
        return
    }
    // // 循环选中
    // state.unselectedList.map((m:any)=>{
    //     m['checkbox'] = val
    // })
}

// 右侧
let countRightSelect = computed(()=>{
    let temp = state.selectedList.filter((c: any) => c.checkbox).length
    let max = state.selectedList.length
    // 当选中没有或满了就关闭半选
    if (0 >= temp || 0 >= max) {
        rightCheckAll.value = false
        rightIsIndeterminate.value = false
        rightToLeftButStatus.value = true
    }else if (temp > 0){
        // 当有选中时改为半选
        rightIsIndeterminate.value = true
        rightToLeftButStatus.value = false
    }else if (temp === max){
        // 全选状态
        rightIsIndeterminate.value = false
        rightCheckAll.value = true
    }
    return temp
})
</script>

<style scoped lang="scss">

:deep(.el-icon) {
    margin-right: 0 !important;
}

:deep(.el-transfer__buttons) {
    padding: 0 10px;
    height: 318px;

    .el-transfer-buttons__wapper {
        display: flex;
        align-items: center;
        height: 100%;
        flex-direction: column;
        justify-content: space-evenly;
    }

    .el-button + .el-button {
        margin-left: 0;
    }
}

</style>